<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <dc-goods-select v-model="settingData.data.goodsList" :multiple="true"></dc-goods-select>
      <div class="card">
        <div class="title">商品样式</div>
        <div class="content">
          <el-form-item label="选择风格">
            <el-radio-group class="custom-radio-button" v-model="settingData.data.mode">
              <el-radio-button :label="1">
                <sa-icon icon="sa-shop-decorate-goodsCard-mode-1" />
              </el-radio-button>
              <el-radio-button :label="2">
                <sa-icon icon="sa-shop-decorate-goodsCard-mode-3" />
              </el-radio-button>
              <el-radio-button :label="3">
                <sa-icon icon="sa-shop-decorate-goodsCard-mode-2" />
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <template v-for="(item, field) in settingData.data.goodsFields" :key="field">
            <template v-if="fieldLabel[field]">
              <el-form-item :label="fieldLabel[field]">
                <dc-color-picker
                  v-model="item.color"
                  v-model:show="item.show"
                  :isShow="true"
                ></dc-color-picker>
              </el-form-item>
            </template>
          </template>
        </div>
      </div>
      <div class="card">
        <div class="title">商品角标</div>
        <div class="content">
          <el-form-item label="角标选择">
            <el-radio-group v-model="settingData.data.tagStyle.show">
              <el-radio :label="0">不显示</el-radio>
              <el-radio :label="1">显示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="settingData.data.tagStyle.show" label="上传图片">
            <div class="sa-flex">
              <sa-uploader v-model="settingData.data.tagStyle.src" fileType="image"></sa-uploader>
              <div class="tip">建议尺寸：36*22</div>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="card">
        <div class="title">加购设置</div>
        <div class="content">
          <el-form-item label="加购按钮">
            <el-radio-group v-model="settingData.data.buyNowStyle.mode">
              <el-radio :label="1">文字</el-radio>
              <el-radio :label="2">图片</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="settingData.data.buyNowStyle.mode == 1">
            <el-form-item label="文字">
              <el-input v-model="settingData.data.buyNowStyle.text"></el-input>
            </el-form-item>
            <el-form-item label="背景1">
              <dc-color-picker v-model="settingData.data.buyNowStyle.color1"></dc-color-picker>
            </el-form-item>
            <el-form-item label="背景2">
              <dc-color-picker v-model="settingData.data.buyNowStyle.color2"></dc-color-picker>
            </el-form-item>
          </template>
          <el-form-item v-if="settingData.data.buyNowStyle.mode == 2" label="图片">
            <div class="sa-flex"
              ><sa-uploader
                v-model="settingData.data.buyNowStyle.src"
                fileType="image"
              ></sa-uploader>
              <div class="tip">建议尺寸：56*56</div>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="card">
        <div class="title">样式</div>
        <div class="content">
          <el-form-item label="上圆角">
            <dc-slider v-model="settingData.data.borderRadiusTop"></dc-slider>
          </el-form-item>
          <el-form-item label="下圆角">
            <dc-slider v-model="settingData.data.borderRadiusBottom"></dc-slider>
          </el-form-item>
          <el-form-item label="间距">
            <dc-slider v-model="settingData.data.space"></dc-slider>
          </el-form-item>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  import { computed } from 'vue';
  import dcColorPicker from '../../common/dc-color-picker.vue';
  import dcGoodsSelect from '../../common/dc-goods-select.vue';
  import dcList from '../../common/dc-list.vue';
  import dcSlider from '../../common/dc-slider.vue';

  const props = defineProps(['settingData', 'tabType']);

  const fieldLabel = computed(() => {
    return {
      title: '商品标题',
      subtitle: '副标题',
      price: '商品价格',
      original_price: '原价',
      sales: '销量',
      stock: '库存',
    };
  });
</script>
